/*
* @Author: zhaoyong
* @Date:   2017-11-19 14:15:44
* @Last Modified by:   zhaoyong
* @Last Modified time: 2017-11-19 17:29:04
*/

import React, {Component} from 'react';
import {
  Form,
  Input,
  Tabs,
  Button,
  Icon,
  Checkbox,
  Row,
  Col,
  Alert,
  message,
} from 'antd';
import {Link} from 'react-router-dom';
import styles from './index.less';
import CSSModules from 'react-css-modules';
import PropTypes from 'prop-types';
const {TabPane} = Tabs;
const FormItem = Form.Item;

import {post} from 'common/fetch';
import {LOGIN_URL} from 'constant/url';

const links = [
  {
    title: '帮助',
    href: '',
  },
  {
    title: '隐私',
    href: '',
  },
  {
    title: '条款',
    href: '',
  },
];
const copyright = (
  <div>
    Copyright <Icon type="copyright" /> 2017 carplus出品
  </div>
);

class Login extends Component {
  state = {
    count: 0,
    type: 'account',
    login: {
      status: false,
    },
  };
  handleSubmit = e => {
    e.preventDefault();
    const {type} = this.state;
    this.props.form.validateFields({force: true}, (err, values) => {
      if (!err) {
        post(LOGIN_URL, {
          name: values.userName,
          passwd: values.password,
        }).then(res => {
          window.location = 'http://kajiaapp.com/';
        });
      }
    });
  };
  render() {
    const {form} = this.props;
    const {getFieldDecorator} = form;
    const {count, type, login} = this.state;
    return (
      <div className={styles.container}>
        <div className={styles.top}>
          <div className={styles.header}>
            <Link to="/">
              <img
                alt=""
                className={styles.logo}
                src="https://gw.alipayobjects.com/zos/rmsportal/NGCCBOENpgTXpBWUIPnI.svg"
              />
              <span className={styles.title}>Car Plus</span>
            </Link>
          </div>
          <div className={styles.desc}>咖加车评，只做真车评!</div>
        </div>

        <div className={styles.main}>
          <Form onSubmit={this.handleSubmit}>
            <Tabs
              animated={false}
              className={styles.tabs}
              activeKey={type}
              onChange={this.onSwitch}>
              <TabPane tab="账户密码登录" key="account">
                {login.status === 'error' &&
                  login.type === 'account' &&
                  login.submitting === false &&
                  this.renderMessage('账户或密码错误')}
                <FormItem>
                  {getFieldDecorator('userName', {
                    rules: [
                      {
                        required: type === 'account',
                        message: '请输入用户名！',
                      },
                    ],
                  })(
                    <Input
                      size="large"
                      prefix={
                        <Icon type="user" className={styles.prefixIcon} />
                      }
                      placeholder="用户"
                    />,
                  )}
                </FormItem>
                <FormItem>
                  {getFieldDecorator('password', {
                    rules: [
                      {
                        required: type === 'account',
                        message: '请输入密码！',
                      },
                    ],
                  })(
                    <Input
                      size="large"
                      prefix={
                        <Icon type="lock" className={styles.prefixIcon} />
                      }
                      type="password"
                      placeholder="密码"
                    />,
                  )}
                </FormItem>
              </TabPane>
              {/*
              <TabPane tab="手机号登录" key="mobile">
                {login.status === 'error' &&
                  login.type === 'mobile' &&
                  login.submitting === false &&
                  this.renderMessage('验证码错误')}
                <FormItem>
                  {getFieldDecorator('mobile', {
                    rules: [
                      {
                        required: type === 'mobile',
                        message: '请输入手机号！',
                      },
                      {
                        pattern: /^1\d{10}$/,
                        message: '手机号格式错误！',
                      },
                    ],
                  })(
                    <Input
                      size="large"
                      prefix={
                        <Icon type="mobile" className={styles.prefixIcon} />
                      }
                      placeholder="手机号"
                    />,
                  )}
                </FormItem>
                <FormItem>
                  <Row gutter={8}>
                    <Col span={16}>
                      {getFieldDecorator('captcha', {
                        rules: [
                          {
                            required: type === 'mobile',
                            message: '请输入验证码！',
                          },
                        ],
                      })(
                        <Input
                          size="large"
                          prefix={
                            <Icon type="mail" className={styles.prefixIcon} />
                          }
                          placeholder="验证码"
                        />,
                      )}
                    </Col>
                    <Col span={8}>
                      <Button
                        disabled={count}
                        className={styles.getCaptcha}
                        size="large"
                        onClick={this.onGetCaptcha}>
                        {count ? `${count} s` : '获取验证码'}
                      </Button>
                    </Col>
                  </Row>
                </FormItem>
              </TabPane>
              */}
            </Tabs>
            <FormItem className={styles.additional}>
              {getFieldDecorator('remember', {
                valuePropName: 'checked',
                initialValue: true,
              })(<Checkbox className={styles.autoLogin}>自动登录</Checkbox>)}
              <a className={styles.forgot} href="">
                忘记密码
              </a>
              <Button
                size="large"
                loading={login.submitting}
                className={styles.submit}
                type="primary"
                htmlType="submit">
                登录
              </Button>
            </FormItem>
          </Form>
          {/*
          <div className={styles.other}>
            其他登录方式
            <span className={styles.iconAlipay} />
            <span className={styles.iconTaobao} />
            <span className={styles.iconWeibo} />
            <Link className={styles.register} to="/user/register">
              注册账户
            </Link>
          </div>
        */}
        </div>
        <div className={styles.globalFooter}>
          {links && (
            <div className={styles.links}>
              {links.map(link => (
                <a
                  key={link.title}
                  target={link.blankTarget ? '_blank' : '_self'}
                  href={link.href}>
                  {link.title}
                </a>
              ))}
            </div>
          )}
          <div className={styles.copyright}>{copyright}</div>
        </div>
      </div>
    );
  }
}

const WrappedLoginForm = Form.create()(Login);

Login.contextTypes = {
  router: PropTypes.object,
};

export default CSSModules(WrappedLoginForm,styles);
